import React, {CSSProperties, useImperativeHandle} from "react";
import {Col, Form, Input, message, Row} from "antd";
import {Post} from "../../utils/http";

const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};

interface ThirdFormProp {
    username: string;
    password: string;
    confirm: string;
    email: string;
}

type ThirdProp = {
    innerRef: React.Ref<{saveUsername(): void}>;
    style: CSSProperties;
    isNext: (flag: boolean) => void;
}

export const ThirdStep:React.FC<ThirdProp> = (props: ThirdProp) => {

    const [form] = Form.useForm<ThirdFormProp>();

    useImperativeHandle(props.innerRef, () => ({
        saveUsername: () => {
            form.validateFields().then(value => {
                console.log("数据源存储的表单信息", value);
                if (value.password !== value.confirm) {
                    message.error('两次输入的密码不相同');
                    return;
                }
                Post<boolean>('/install/user', {...value}).then(res => {
                    if (res.code === '100200') {
                        message.success('配置账户信息成功');
                        props.isNext(true);
                    } else {
                        message.error(res.msg);
                        props.isNext(false);
                    }
                })
            })
        }
    }))

    return <Row style={props.style}>
        <Col span={12} offset={6} style={{marginTop: '8%'}}>
            <Form
                className="form-area"
                {...layout}
                form={form}
                labelAlign={"left"}
                layout="horizontal"
                name="form_in_modal"
            >
                <Form.Item label="账号" name="username" rules={[{required: true, message: '请输入账号'}]}>
                    <Input />
                </Form.Item>
                <Form.Item label="密码" name="password" rules={[{required: true, message: '请输入密码'}]}>
                    <Input.Password />
                </Form.Item>
                <Form.Item label="确认密码" name="confirm" rules={[{required: true, message: '请输入确认密码'}]}>
                    <Input.Password />
                </Form.Item>
                <Form.Item label="邮箱" name="email" rules={[{required: true, message: '请输入邮箱'}]}>
                    <Input />
                </Form.Item>
            </Form>
        </Col>
    </Row>
}
